<template>
  <div class="main flex">
    <div class="headers">
      <div class="hds-tit">表头编辑</div>
      <div class="hds-bd">
        <div class="item item-input">
          <div class="hd i1d6">
            <label class="tit">标题</label>
          </div>
          <div class="bd i5d6">
            <el-input v-model="pageView.title"></el-input>
          </div>
        </div>
        <div class="item item-input">
          <div class="hd i1d6">
            <label class="tit">描述</label>
          </div>
          <div class="bd i5d6">
            <el-input v-model="pageView.describe"></el-input>
          </div>
        </div>
        <div class="item" data-type="upimg">
          <div class="i1d6 hd">
            <label class="tit">Logo</label>
          </div>
          <div class="i5d6 bd">
              <i class="iconfont icon-pic"></i> 点击选择图片
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </div>
        </div>
      </div>
    </div> 
  </div>
</template>

<script>
import Utils from '../utils'
export default{
  data:function(){
    return {
      imageUrl: '',
      pageView:this.$pageView
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>
